<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/common/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/change_tag.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
</head>
<body>
<div id="web">
    <header>
        <a  href="../info.html"><i class="iconfont icon-youbian1"></i></a>
        <h4>修改角色/标签</h4>
    </header>
</div>
<section>
    <article>
        <div class="title"><p><span>选择角色</span><span>必选，最多三个</span></p></div>
        <ul class="clearfix" id="job">
            <li>模特</li>
            <li>演员</li>
            <li>歌手</li>
            <li>主持人</li>
            <li>经纪人</li>
            <li>舞者</li>
            <li>乐手</li>
            <li>魔术师</li>
            <li>幕后</li>
            <li>导演</li>
            <li>编剧</li>
            <li>制作人</li>
            <li>戏剧</li>
            <li>曲艺</li>
            <li>杂技</li>
            <li>童星</li>
            <li>艺术生</li>
            <li>摄影师</li>
            <li>机构团体</li>
            <li>其他</li>
        </ul>
        <hr>
        <div class="title"><p><span>选择标签</span><span>选填，最多六个</span></p></div>
        <ul class="clearfix" id="work">
            <li>特技</li>
            <li>综艺</li>
            <li>群演</li>
            <li>淘女郎</li>
            <li>经纪人</li>
            <li>舞者</li>
            <li>乐师</li>
            <li>主持人</li>
            <li>幕后</li>
            <li>乐队</li>
            <li>街舞</li>
            <li>导演</li>
        </ul>
        <input type="button" name="" id="confirm_btn" value="确定">
    </article>
</section>
<script src="js/getFont.js"></script>
<script type="text/javascript" src="js/getClass.js"></script>
<script src="../js/jquery.js"></script>
<script>
    var oJob=document.getElementById('job');
    var oWork=document.getElementById('work');
    $("#job").children("li").each(function () {
    $(this).click(function(){
        var Job=getClass(oJob,'select');
        if(!$(this).hasClass("select")){
            if(Job.length<3){

                $(this).addClass("select");
            }
        }else{

            $(this).removeClass("select");
        }
    });
})
    $("#work").children("li").each(function () {
        $(this).click(function(){
            var work=getClass(oWork,'select');
            if(!$(this).hasClass("select")){
                if(work.length<6){

                    $(this).addClass("select");
                }
            }else{

                $(this).removeClass("select");
            }
        });
    })
</script>
</body>

</html>